<template>
    <div class="container">
        <h3>记录生活，让生活变得更有意义</h3>
        <ul>
            <li v-for="item in daily.data" :key="item.id" @click="daily.push(item.path)"><el-button type="primary">{{ item.name }}</el-button></li>
        </ul>
    </div>
</template>
<script setup lang="ts">
import {useRoute,useRouter} from 'vue-router'
const route = useRoute()
const router = useRouter()
console.log(route);
console.log(router);

interface typeData {
    data:({
        id:number,
        name:string,
        path:string,
    })[],
    push:Function,
}

const daily:typeData = reactive({
    data:[
        {id:1, name: '老赖作息时间表', path:'/laolai' },
        {id:2, name:' 摸鱼办', path:'/moyu' },
        {id:2, name:' 测试页面', path:'/ces' },
    ],
    push(path:string){
        router.push(path)
    },
})

</script>
<style scoped lang="less">
.container{
    h3{
        text-align: center;
        font-size: 40px;
        line-height: 80px;
        margin-bottom: 50px;
    }
    ul{
        width: 300px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        li{
            margin-bottom: 10px;
        }
    }
}


</style>